<template>
	<view class="">
		<view class="">
			<text>For和ForEach性能对比</text>
		</view>
		<view class="">
			<button type="default" @click="but_for">For性能</button>
			<text>计数---->{{totalfor}}</text>
			<br />
			<text>消耗时间---->{{countTimefor}}</text>
		</view>
		<view class="">
			<button type="default" @click="but_foreach">ForEach性能</button>
			<text>计数---->{{totalforeach}}</text>
			<br />
			<text>消耗时间---->{{countTimeforeach}}</text>
		</view>
		<view class="">
			<button type="default" @click="but_map">map()方法</button>
			<button type="default" @click="displaynone('map')">显示或隐藏map结果</button>
			<text>结果：</text>
			<view class="" v-if="mapnone">
				<text>map原数据:{{mapArrs}}</text>
				<text>map新数据:{{mapNewArrs}}</text>
			</view>
		</view>
		<view class="">
			<button type="default" @click="but_filter">filter()方法</button>
			<button type="default" @click="displaynone('filter')">显示或隐藏filter结果</button>
			<text>结果：</text>
			<view class="" v-if="filternone">
				<text>filter原数据:{{filterArrs}}</text>
				<text>filter新数据:{{filterNewArrs}}</text>
			</view>
		</view>
		<view class="">
			<button type="default" @click="but_reduce">reduce()方法</button>
			<button type="default" @click="displaynone('reduce')">显示或隐藏reduce结果</button>
			<text>结果：</text>
			<view class="" v-if="reducenone">
				<text>reduce原数据:{{reduceArrs}}</text>
				<text>reduce新数据:{{reduceNewArrs}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	// 详细内容在,http://t.csdnimg.cn/bodob

	import {
		ref
	} from 'vue';


	function displaynone(e) {
		switch (e) {
			case 'map':
				console.log(e)
				mapnone.value = !mapnone.value
				break;
			case 'filter':
				filternone.value = !filternone.value
				break;
			case 'reduce':
				reducenone.value = !reducenone.value
				break;
			default:
				break;
		}

	}


	/*
	==================================================
	Reduce()用法
	过滤方法，会对原数组中的每个元素应用指定的函数，并返回一个新数组，其中包含符合条件的元素。原数组不会受到影响。
	==================================================
	*/
	let reducenone = ref(false)
	let reduceNewArrs = ref(null)
	let reduceArrs = [{
		name: "张三",
		age: 29
	}, {
		name: "李四",
		age: 16
	}, {
		name: "王五",
		age: 50
	}, {
		name: "小明",
		age: 21
	}];

	function but_reduce() {

		reduceNewArrs.value = reduceArrs.reduce((prev, current, index) => {
			return prev + current.age
		}, 0)
		console.log(reduceNewArrs.value);

		// 116



	}


	/*
	==================================================
	Filter()用法
	过滤方法，会对原数组中的每个元素应用指定的函数，并返回一个新数组，其中包含符合条件的元素。原数组不会受到影响。
	==================================================
	*/
	let filternone = ref(false)
	let filterNewArrs = ref([])
	let filterArrs = [{
		id: 6,
		name: "HTML5"
	}, {
		id: 5,
		name: "HTML5"
	}, {
		id: 1,
		name: "HTML5"
	}, {
		id: 2,
		name: "JavaScript"
	}, {
		id: null,
		name: "小程序"
	}, {
		name: "NodeJS"
	}, {
		id: 3,
		name: "VueJS"
	}, {
		id: 5,
		name: "VueJS"
	}, {
		id: 6,
		name: "VueJS"
	}];

	function but_filter() {

		// filterNewArrs = filterArrs.filter(item => {
		// 	return item.name
		// }).map(item => {
		// 	return {
		// 		...item,
		// 		author: "谨念"
		// 	}
		// })
		
		// 使用filter进行去重，同时处理id为null的情况
		let uniqueById = filterArrs.filter((item, index, self) => {
		  // 对于没有id的项，直接保留（根据需求可调整）
		  if (item.id === null) return true;
		
		  // 找到数组中第一个id与当前item.id相等的元素的索引
		  // 如果这个索引等于当前循环的索引，说明是第一次遇到这个id，保留该元素
		  return self.findIndex(obj => obj.id === item.id) === index;
		}).map(item=>{
			return {
				...item,
				author:"谨念"
			}
		});
		
		console.log(uniqueById);
		
		
		filternone.value = !filternone.value
		// console.log(filterNewArrs);

		// [{id: 1, name: 'HTML5', author: '谨念'},...]


	}


	/*
	==================================================
	Map()方法是数组原型的一个函数，对数组遍历不破坏原数组，将会创建一个新数组，按照原始数组元素顺序依次执行给定的函数，map方法非常适合用于处理数组中的每个元素并生成新的数组。
	==================================================
	*/
	let mapnone = ref(false)
	let mapNewArrs = ref([])
	let mapArrs = ref([{
		name: "华为",
		price: 6999
	}, {
		name: "苹果",
		price: 9888
	}, {
		name: "小米",
		price: 4999
	}])

	function but_map() {

		mapNewArrs = mapArrs.value.map(({
			name,
			price
		}) => {
			return {
				value: name,
				text: price
			}
		})

		// mapNewArrs.value = mapArrs.value.map(item => {
		// 	return {
		// 		...item,
		// 		price: item.price + "元",
		// 		number: 888
		// 	}
		// });
		mapnone.value = !mapnone.value
		console.log(mapNewArrs);

		//[{name: '华为', price: '6999元', number: 888},....]

	}

	/*
	==================================================
	for性能展示
	==================================================
	*/
	let totalfor = ref(0);
	let countTimefor = ref(0);

	function but_for() {

		let arrs = [...Array(9999999).keys()]
		let startTime = Date.now();
		for (let i = 0; i < arrs.length; i++) totalfor.value += i;
		let endTime = Date.now();
		countTimefor.value = endTime - startTime;
		// console.log("计数---->"+totalfor.value);
		// console.log("消耗时间---->"+countTimefor.value);

		//计数---->49999985000001
		//消耗时间---->41

	}


	/*
	==================================================
	foreach性能展示
	==================================================
	*/
	let totalforeach = ref(0);
	let countTimeforeach = ref(0);

	function but_foreach() {
		let arrs = [...Array(9999999).keys()]
		let startTime = Date.now();
		arrs.forEach(item => {
			// if(item>10)return;
			totalforeach.value += item;
		})
		let endTime = Date.now();
		countTimeforeach.value = endTime - startTime;
		// console.log("计数---->"+totalforeach.value);
		// console.log("消耗时间---->"+countTimeforeach.value);

		// 计数---->55
		// 消耗时间---->103

	}
</script>

<style lang="scss" scoped>

</style>